<template>
  <div>
    <div class="clearfix" id="login_wrap">
      <h2 class="title">随便搞个登录页</h2>
      <div id="login">
        <div class="login--account" style="margin-top: 30px">
          <span>账号：</span>
          <input type="text" placeholder="请输入账号" name="account" v-model="username"/>
        </div>
        <div class="login--password">
          <span>密码：</span>
          <input type="password" placeholder="请输入密码" name="password" v-model="password" @keyup.enter="login_standard"/>
        </div>
        <p class="login--btn">
          <button id="loginBtn" @click="openFullScreen()" style="margin-top: 50px">登录</button>
          <button @click="loginData">模拟登录</button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "login",
    data() {
      return {
        username: "",
        password: "",
        fullscreenLoading: false,
      }
    },
    methods: {
      // {
      //   user_login_name: "liushijiu",
      //     user_pass: "123456"
      // }

      // addData(){
      //   let data={
      //     id:1
      //   };
      //   this.$axios.post(this.$api.commodity_material.test,data ,
      //     {
      //       transformRequest: [
      //         function (data) {
      //           let params = "";
      //           var arr = [];
      //           for (var key in data) {
      //             arr.push(key + "=" + data[key]);
      //           }
      //           params = arr.join("&");
      //           return params;
      //         }
      //       ]
      //     }, {
      //       headers: {
      //         'Content-Type': 'application/x-www-form-urlencoded'
      //       }
      //     }).then((res) => {
      //     console.log(res);
      //   });
      // },
      //模拟登陆请求数据
      openFullScreen() {
        const loading = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let data={
          user_login_name:this.username,
          user_pass:this.password
        };
        this.$axios.get(this.$api.user.userLogin
          // {
          //   transformRequest: [
          //     function (data) {
          //       let params = "";
          //       var arr = [];
          //       for (var key in data) {
          //         arr.push(key + "=" + data[key]);
          //       }
          //       params = arr.join("&");
          //       return params;
          //     }
          //   ]
          // }, {
          //   headers: {
          //     'Content-Type': 'application/x-www-form-urlencoded'
          //   }
          // }
          ).then((res) => {
          let data = res.data;
          loading.close();
          console.log(data[0]);
          let token = data[0].data.token;
          this.$store.commit('SetToken', token);
          let obj = {
            menuInfo: data[0].data.menuInfo[0],
            userInfo: data[0].name
          };
          let tableData = [
            {
              "id": 1,
              "hanghao": "1",
              "status": "已通过",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "总公司",
              "fendian": "小巧分店",
              "guitai": "柜台1",
              "leikumingcheng": "镶嵌类",
              "weight": "10",
              "chuangdanren": "lxs"
            },
            {
              "id": 2,
              "hanghao": "2",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "上海分公司",
              "fendian": "大巧分店",
              "leikumingcheng": "素金类",
              "weight": "20",
              "guitai": "柜台2",
              "chuangdanren": "lxs"
            },
            {
              "id": 3,
              "hanghao": "3",
              "guitai": "柜台1",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "总公司",
              "fendian": "中巧分店",
              "leikumingcheng": "镶嵌类",
              "weight": "30",
              "chuangdanren": "lxs"
            },
            {
              "id": 4,
              "hanghao": "4",
              "guitai": "柜台1",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "上海分公司",
              "fendian": "ax分店",
              "leikumingcheng": "镶嵌类",
              "weight": "40",
              "chuangdanren": "lxs"
            },
            {
              "id": 5,
              "guitai": "柜台1",
              "hanghao": "5",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "上海分公司",
              "fendian": "小lu分店",
              "leikumingcheng": "素金类",
              "weight": "50",
              "chuangdanren": "lxs"
            },
            {
              "id": 6,
              "guitai": "柜台1",
              "hanghao": "6",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "总公司",
              "fendian": "小分店",
              "leikumingcheng": "镶嵌类",
              "weight": "60",
              "chuangdanren": "lxs"
            },
            {
              "id": 7,
              "guitai": "柜台1",
              "hanghao": "7",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "总公司",
              "fendian": "xx分店",
              "leikumingcheng": "素金类",
              "weight": "70",
              "chuangdanren": "lxs"
            }
          ];
          let addDatas = [
            {
              "id": 8,
              "hanghao": "8",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "总公司",
              "fendian": "小巧分店",
              "guitai": "柜台1",
              "leikumingcheng": "镶嵌类",
              "weight": "10",
              "chuangdanren": "lxs"
            },
            {
              "id": 9,
              "hanghao": "9",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "上海分公司",
              "fendian": "大巧分店",
              "leikumingcheng": "素金类",
              "weight": "20",
              "guitai": "柜台2",
              "chuangdanren": "lxs"
            },
            {
              "id": 10,
              "hanghao": "10",
              "guitai": "柜台1",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "总公司",
              "fendian": "中巧分店",
              "leikumingcheng": "镶嵌类",
              "weight": "30",
              "chuangdanren": "lxs"
            },
            {
              "id": 11,
              "hanghao": "11",
              "guitai": "柜台1",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "上海分公司",
              "fendian": "ax分店",
              "leikumingcheng": "镶嵌类",
              "weight": "40",
              "chuangdanren": "lxs"
            },
            {
              "id": 12,
              "guitai": "柜台1",
              "hanghao": "12",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "上海分公司",
              "fendian": "小lu分店",
              "leikumingcheng": "素金类",
              "weight": "50",
              "chuangdanren": "lxs"
            },
            {
              "id": 13,
              "hanghao": "13",
              "guitai": "柜台1",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "上海分公司",
              "fendian": "ax分店",
              "leikumingcheng": "镶嵌类",
              "weight": "40",
              "chuangdanren": "lxs"
            },
            {
              "id": 14,
              "guitai": "柜台1",
              "hanghao": "14",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "总公司",
              "fendian": "小lu分店",
              "leikumingcheng": "素金类",
              "weight": "50",
              "chuangdanren": "lxs"
            },
            {
              "id": 15,
              "guitai": "柜台1",
              "hanghao": "15",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "总公司",
              "fendian": "小luu分店",
              "leikumingcheng": "素金类",
              "weight": "50",
              "chuangdanren": "lxs"
            },
            {
              "id": 16,
              "guitai": "柜台1",
              "hanghao": "16",
              "status": "待审核",
              "danjubianhao": "GPR12A0001",
              "chuangdanriqi": "2017-11-29",
              "zongbumingcheng": "总公司",
              "fendian": "小luu分店",
              "leikumingcheng": "素金类",
              "weight": "50",
              "chuangdanren": "lxs"
            }
            ];
          tableData = JSON.stringify(tableData);
          addDatas = JSON.stringify(addDatas);
          localStorage.setItem("tableData", tableData);
          localStorage.setItem("addDatas", addDatas);
          this.$store.commit("LoginSuccess", obj);
          this.$router.push("/home");
        });
      },
      loginData() {
          this.$axios.get(this.$api.user.userLogin).then((res) => {
            console.log(res);
        })
      },
      // async login_standard() {
      //   try {
      //     //await 等待会面的异步函数执行完毕再继续向下执行
      //     let data = await this.loginData();
      //     let token = data[0].data.token;
      //     this.$store.commit('SetToken', token);
      //     //登录成功,将用户数据保存在vuex中
      //     //获取权限列表
      //     let obj = {
      //       menuInfo: data[0].data.menuInfo,
      //       userInfo: data[0].name
      //     };
      //     // console.log(data[0].data.menuInfo);
      //     this.$store.commit("LoginSuccess", obj);
      //     this.$router.push("/home");
      //   } catch (e) {
      //     console.log(e)
      //   }
      // },

      //获取登录信息
      // getdata() {
      //   this.$axios.post("http://172.16.6.69:8080/login", {
      //       user_login_name: "liushijiu",
      //       user_pass: "123456"
      //     },
      //     {
      //       transformRequest: [
      //         function (data) {
      //           let params = "";
      //           var arr = [];
      //           for (var key in data) {
      //             arr.push(key + "=" + data[key]);
      //           }
      //           params = arr.join("&");
      //           return params;
      //         }
      //       ]
      //     }, {
      //       headers: {
      //         'Content-Type': 'application/x-www-form-urlencoded'
      //       }
      //     }).then((res) => {
      //     console.log(res);
      //   });
      // },
      //退出

      tuichu() {
        this.$store.commit("loginEdit");
      }
    }
  }
</script>

<style scoped lang="scss">
  .clearfix {
    width: 100%;
    min-height: 100vh;
  }

  .title {
    text-align: center;
    font-size: 22px;
    padding-top: 100px;
  }

  #login_wrap {
    position: relative;
    background: rgba(64, 64, 194, 0.1);
    > div {
      background: #fff;
      width: 479px;
      height: 325px;
      padding: 30px 40px;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      > div {
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
        &.login--account {
          margin: 25px 0 30px;
        }
        span {
          color: #666;
          display: inline-block;
          width: 84px;
          font-size: 20px;
        }
        input {
          outline: none;
          background: none;
          font-size: 16px;
          border: none;
          height: 30px;
          width: 280px;
          padding-left: 12px;
          box-sizing: border-box;
          color: #666;
          &.error {
            border: 1px solid #f00;
          }
          &::-webkit-input-placeholder {
            color: #aaa;
          }
        }
      }

      p {
        text-align: right;
        &.login--btn {
          button {
            outline: none;
            width: 100%;
            height: 50px;
            font-size: 18px;
            background: #0f6171;
            border: none;
            margin-top: 30px;
            color: #fff;
            border-radius: 6px;
            cursor: pointer;
          }
        }
        a {
          color: #fff;
          display: inline-block;
          padding: 0 15px;
          font-size: 14px;
        }
      }
    }
  }
</style>
